<template>
  <div class="overview-style">
    <div class="top-select-group">
      <el-date-picker
        v-model="value1"
        type="daterange"
        range-separator="至"
        start-placeholder="开始日期"
        end-placeholder="结束日期"
      ></el-date-picker>
      <el-select v-model="serviceGroupValue" clearable placeholder="全部客服组">
        <el-option
          v-for="item in serviceGroupOptions"
          :key="item.value"
          :label="item.label"
          :value="item.value"
        ></el-option>
      </el-select>
      <el-select v-model="serviceValue" clearable placeholder="全部客服">
        <el-option
          v-for="item in serviceOptions"
          :key="item.value"
          :label="item.label"
          :value="item.value"
        ></el-option>
      </el-select>
      <el-button style="float:right;">导出当前数据</el-button>
    </div>
    <div class="middle-data-group">
      <statistic-item
        v-for="item in itemData"
        :key="item.name"
        :text="item.text"
        :num="item.num"
        :label="item.label"
      ></statistic-item>
    </div>
    <div class="session-num-group">
      <div class="echarts-container">
        <div ref="visitorEcharts" style="height: 320px;width: 1150px;"></div>
      </div>
    </div>
    <div class="bottom-table-group">
      <el-table
        :header-cell-style="{'background-color':'#e6f1ff','height':'62px'}"
        ref="multipleTable"
        :data="tableData"
        tooltip-effect="dark"
        style="width: 100%"
        v-loading="isLoading"
        @selection-change="handleSelectionChange"
        :cell-style="cellStyle"
      >
        <el-table-column prop="viewType" label="来源类型" align="center"></el-table-column>
        <el-table-column prop="pageView" label="浏览量" align="center"></el-table-column>
        <el-table-column prop="visitorNum" label="访客量" align="center"></el-table-column>
        <el-table-column prop="visitorNum" label="访问次数" align="center"></el-table-column>
        <el-table-column prop="visitorCount" label="平均页面浏览时长" align="center"></el-table-column>
      </el-table>
      <div class="bottom-pagination-group">
        <el-pagination
          background
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="currentPage"
          :page-sizes="[10, 20, 30, 40]"
          :page-size="pageSize"
          layout="total, prev, pager, next,sizes, jumper"
          :total="totalData"
        ></el-pagination>
      </div>
    </div>
  </div>
</template>

<script>
import StatisticItem from "@/components/items/StatisticItem";
import api from "@/api/api";
export default {
  name: "StatisticPageview",
  components: {
    StatisticItem
  },
  props: {},
  data() {
    return {
      tableData: [
        {
          col1: "网页",
          col2: "5000",
          col3: "300",
          col4: "3000",
          col5: "1000"
        },
        {
          col1: "网页",
          col2: "5000",
          col3: "300",
          col4: "3000",
          col5: "1000"
        },
        {
          col1: "网页",
          col2: "5000",
          col3: "300",
          col4: "3000",
          col5: "1000"
        },
        {
          col1: "网页",
          col2: "5000",
          col3: "300",
          col4: "3000",
          col5: "1000"
        },
        {
          col1: "网页",
          col2: "5000",
          col3: "300",
          col4: "3000",
          col5: "1000"
        },
        {
          col1: "网页",
          col2: "5000",
          col3: "300",
          col4: "3000",
          col5: "1000"
        },
        {
          col1: "网页",
          col2: "5000",
          col3: "300",
          col4: "3000",
          col5: "1000"
        },
        {
          col1: "网页",
          col2: "5000",
          col3: "300",
          col4: "3000",
          col5: "1000"
        },
        {
          col1: "网页",
          col2: "5000",
          col3: "300",
          col4: "3000",
          col5: "1000"
        },
        {
          col1: "网页",
          col2: "5000",
          col3: "300",
          col4: "3000",
          col5: "1000"
        }
      ],
      itemData: [
        {
          name: "item1",
          text: "浏览量（PV）",
          num: 2300,
          label: "平均浏览页面20"
        },
        {
          name: "item1",
          text: "访问量（UV）",
          num: 30,
          label: "跳出率20%"
        },
        {
          name: "item1",
          text: "咨询会话数",
          num: 208,
          label: "咨询会话率50%"
        },
        {
          name: "item1",
          text: "总评价数",
          num: 67,
          label: "客户评价率80%"
        },
        {
          name: "item1",
          text: "好评率",
          num: "78%",
          label: "评价率67%"
        }
      ],
      serviceGroupOptions: [
        {
          value: "选项1",
          label: "客服组一"
        },
        {
          value: "选项2",
          label: "客服组二"
        },
        {
          value: "选项3",
          label: "客服组三"
        }
      ],
      serviceGroupValue: "",
      serviceOptions: [
        {
          value: "选项1",
          label: "王美美"
        },
        {
          value: "选项2",
          label: "七尾"
        },
        {
          value: "选项3",
          label: "李想"
        },
        {
          value: "选项4",
          label: "王志"
        }
      ],
      serviceValue: "",
      currentPage: 1,
      pageSize: 10,
      totalData: 0,
      isLoading: false
    };
  },
  watch: {},
  computed: {},
  methods: {
    drawEcharts() {
      // 注意不能在created中调用该函数，建议在mounted中调用该函数
      let myChart = this.$echarts.init(this.$refs.visitorEcharts);
      myChart.setOption({
        color: ["#3bd77f", "#ff7474", "#ff9945"],
        title: {
          text: "访问量统计"
        },
        tooltip: {
          trigger: "axis"
        },
        legend: {
          data: ["总访问量", "总会话量", "有效会话量"]
        },
        grid: {
          left: "3%",
          right: "4%",
          bottom: "10%",
          containLabel: true
        },
        toolbox: {
          feature: {
            saveAsImage: {}
          }
        },
        xAxis: {
          type: "category",
          boundaryGap: false,
          data: [
            "00:00",
            "01:00",
            "02:00",
            "03:00",
            "04:00",
            "05:00",
            "06:00",
            "07:00",
            "08:00",
            "09:00",
            "10:00",
            "11:00",
            "12:00",
            "13:00",
            "14:00",
            "15:00",
            "16:00",
            "17:00",
            "18:00",
            "19:00",
            "20:00",
            "21:00",
            "22:00",
            "23:00"
          ]
        },
        yAxis: {
          type: "value"
        },
        series: [
          {
            name: "总访问量",
            type: "line",
            stack: "总量",
            data: [
              120,
              132,
              101,
              134,
              90,
              230,
              120,
              132,
              101,
              134,
              90,
              230,
              120,
              132,
              101,
              134,
              90,
              230,
              120,
              132,
              101,
              134,
              90,
              230
            ]
          },
          {
            name: "总会话量",
            type: "line",
            stack: "总量",
            data: [
              220,
              182,
              191,
              234,
              290,
              330,
              220,
              182,
              191,
              234,
              290,
              330,
              220,
              182,
              191,
              234,
              290,
              330,
              220,
              182,
              191,
              234,
              290,
              330
            ]
          },
          {
            name: "有效会话量",
            type: "line",
            stack: "总量",
            data: [
              150,
              232,
              201,
              154,
              190,
              330,
              150,
              232,
              201,
              154,
              190,
              330,
              150,
              232,
              201,
              154,
              190,
              330,
              150,
              232,
              201,
              154,
              190,
              330
            ]
          }
        ],
        dataZoom: [
          {
            type: "slider", //图表下方的伸缩条
            show: true, //是否显示
            realtime: true, //拖动时，是否实时更新系列的视图
            bottom: "0"
          }
        ]
      });
    },
    getPageData() {
      this.isLoading = true;
      api
        .getAllViewDataAPI({
          page: this.currentPage,
          limit: this.pageSize
        })
        .then(res => {
          this.isLoading = false;
          let { error, data } = res.data;
          if (error) {
            this.$message.error("请求接口异常");
          } else {
            this.totalData = data.total;
            this.tableData = data.page;
          }
        });
    }
  },
  created() {
    this.getPageData();
  },
  mounted() {
    this.drawEcharts();
  }
};
</script>

<style scoped>
.overview-style {
  padding: 20px;
  background-color: #fff;
  border-radius: 5px;
}
.middle-data-group {
  display: flex;
  flex-wrap: wrap;
  /* justify-content: space-evenly; */
  align-items: center;
  width: 100%;
  margin-top: 10px;
}
.item-title-style {
  padding: 20px;
  font-size: 20px;
  font-weight: bold;
}
.bottom-table-group {
  margin-top: 10px;
  width: 100%;
  display: inline-block;
}
.echarts-container {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
}
.bottom-pagination-group {
  padding: 20px 20px 0;
  float: right;
}
</style>
